<template>
  <div>
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="page-title">数据概览</div>

      <!-- 数据概览 -->
      <div class="data-overview">
        <div class="overview-header">
          <div class="overview-title">核心数据指标</div>
          <div class="overview-filters">
            <div class="time-filter">
              <span>时间范围：</span>
              <el-radio-group v-model="timeRange">
                <el-radio-button label="7d">近7天</el-radio-button>
                <el-radio-button label="30d">近30天</el-radio-button>
                <el-radio-button label="90d">近90天</el-radio-button>
              </el-radio-group>
            </div>
            <el-form>
              <el-form-item class="list-search-three">
                <el-select v-model="contentType" placeholder="请选择内容类型">
                  <template #prefix>
                    <div class="ml-2">
                      <span>内容类型</span>
                      <el-divider direction="vertical"></el-divider>
                    </div>
                  </template>
                  <el-option
                      v-for="item in sortingOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <!-- 数据卡片 -->
      <div class="data-cards">
        <div class="data-card">
          <div class="card-icon" style="background-color: rgba(254, 44, 85, 0.1); color: var(--primary-color);">
            <i class="fa-solid fa-eye"></i>
          </div>
          <div class="card-title">总曝光量</div>
          <div class="card-value">{{ formatNumber(overviewData.views) }}</div>
          <div class="card-change positive">
            <i class="fa-solid fa-arrow-up"></i>
            <span>{{ overviewData.viewsChange }}%</span>
          </div>
        </div>

        <div class="data-card">
          <div class="card-icon" style="background-color: rgba(54, 162, 235, 0.1); color: rgba(54, 162, 235, 1);">
            <i class="fa-solid fa-heart"></i>
          </div>
          <div class="card-title">总互动量</div>
          <div class="card-value">{{ formatNumber(overviewData.interactions) }}</div>
          <div class="card-change positive">
            <i class="fa-solid fa-arrow-up"></i>
            <span>{{ overviewData.interactionsChange }}%</span>
          </div>
        </div>

        <div class="data-card">
          <div class="card-icon" style="background-color: rgba(75, 192, 192, 0.1); color: rgba(75, 192, 192, 1);">
            <i class="fa-solid fa-share"></i>
          </div>
          <div class="card-title">总分享量</div>
          <div class="card-value">{{ formatNumber(overviewData.shares) }}</div>
          <div class="card-change negative">
            <i class="fa-solid fa-arrow-down"></i>
            <span>{{ overviewData.sharesChange }}%</span>
          </div>
        </div>

        <div class="data-card">
          <div class="card-icon" style="background-color: rgba(153, 102, 255, 0.1); color: rgba(153, 102, 255, 1);">
            <i class="fa-solid fa-user-plus"></i>
          </div>
          <div class="card-title">新增粉丝</div>
          <div class="card-value">{{ formatNumber(overviewData.newFollowers) }}</div>
          <div class="card-change positive">
            <i class="fa-solid fa-arrow-up"></i>
            <span>{{ overviewData.newFollowersChange }}%</span>
          </div>
        </div>

        <div class="data-card">
          <div class="card-icon" style="background-color: rgba(255, 159, 64, 0.1); color: rgba(255, 159, 64, 1);">
            <i class="fa-solid fa-comment"></i>
          </div>
          <div class="card-title">评论量</div>
          <div class="card-value">{{ formatNumber(overviewData.comments) }}</div>
          <div class="card-change positive">
            <i class="fa-solid fa-arrow-up"></i>
            <span>{{ overviewData.commentsChange }}%</span>
          </div>
        </div>

        <div class="data-card">
          <div class="card-icon" style="background-color: rgba(255, 99, 132, 0.1); color: rgba(255, 99, 132, 1);">
            <i class="fa-solid fa-bookmark"></i>
          </div>
          <div class="card-title">收藏量</div>
          <div class="card-value">{{ formatNumber(overviewData.saves) }}</div>
          <div class="card-change positive">
            <i class="fa-solid fa-arrow-up"></i>
            <span>{{ overviewData.savesChange }}%</span>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-container">
        <div class="chart-card">
          <div class="chart-title">曝光量与互动量趋势</div>
          <div class="chart-content">
            <canvas id="viewsInteractionsChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">内容类型分布</div>
          <div class="chart-content">
            <canvas id="contentTypeChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">粉丝增长趋势</div>
          <div class="chart-content">
            <canvas id="followersGrowthChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">互动类型分布</div>
          <div class="chart-content">
            <canvas id="interactionTypeChart"></canvas>
          </div>
        </div>
      </div>

      <!-- 热门内容表格 -->
      <div class="hot-content">
        <div class="hot-title">热门内容</div>
        <el-table :data="hotContentData" stripe style="width: 100%">
          <el-table-column label="内容标题" width="300">
            <template slot-scope="scope">
              <div class="content-title">
                <img :src="scope.row.cover" alt="内容封面" class="content-cover">
                <span class="title-text">{{ scope.row.title }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="内容类型"></el-table-column>
          <el-table-column prop="views" label="曝光量" :formatter="formatNumber"></el-table-column>
          <el-table-column prop="interactions" label="互动量" :formatter="formatNumber"></el-table-column>
          <el-table-column prop="interactionRate" label="互动率" :formatter="formatPercentage"></el-table-column>
          <el-table-column prop="date" label="发布日期"></el-table-column>
        </el-table>
      </div>

      <!-- 粉丝增长趋势 -->
      <div class="fans-growth">
        <div class="growth-title">粉丝增长趋势</div>
        <el-table :data="fansGrowthData" stripe style="width: 100%">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="followers" label="粉丝总数" :formatter="formatNumber"></el-table-column>
          <el-table-column prop="newFollowers" label="新增粉丝" :formatter="formatNumber"></el-table-column>
          <el-table-column prop="unFollowers" label="取消关注" :formatter="formatNumber"></el-table-column>
          <el-table-column prop="netGrowth" label="净增长" :formatter="formatNumber"></el-table-column>
          <el-table-column label="增长趋势">
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.growthRate"
                           :color="getProgressColor(scope.row.growthRate)"></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from "chart.js/auto";

export default {
  name: "Over-View",
  data() {
    return {
      sortingOptions: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "穿搭",
        },
        {
          value: "选项3",
          label: "美妆",
        },
        {
          value: "选项3",
          label: "美食",
        },
        {
          value: "选项2",
          label: "旅行",
        },
        {
          value: "选项3",
          label: "生活",
        },
        {
          value: "选项3",
          label: "数码",
        },
      ],
      activeMenu: 'analytics-overview', // 侧边栏激活菜单
      timeRange: '30d', // 默认时间范围
      contentType: '', // 默认内容类型（全部）
      overviewData: { // 核心数据指标（模拟）
        views: 12589632,
        viewsChange: 12.5,
        interactions: 856932,
        interactionsChange: 8.3,
        shares: 42689,
        sharesChange: 2.1,
        newFollowers: 156892,
        newFollowersChange: 15.7,
        comments: 98632,
        commentsChange: 10.2,
        saves: 125896,
        savesChange: 7.3
      },
      hotContentData: [ // 热门内容数据（模拟）
        {
          cover: 'https://picsum.photos/id/26/200/200',
          title: '夏季穿搭小技巧，让你轻松变身时尚达人',
          type: '穿搭',
          views: 2569324,
          interactions: 156932,
          interactionRate: 6.1,
          date: '2025-05-10'
        },
        {
          cover: 'https://picsum.photos/id/22/200/200',
          title: '平价化妆品推荐，学生党必备',
          type: '美妆',
          views: 1896542,
          interactions: 125863,
          interactionRate: 6.6,
          date: '2025-05-08'
        },
        {
          cover: 'https://picsum.photos/id/18/200/200',
          title: '周末探店：5家高颜值咖啡馆推荐',
          type: '美食',
          views: 1569324,
          interactions: 98632,
          interactionRate: 6.3,
          date: '2025-05-05'
        }
      ],
      fansGrowthData: [ // 粉丝增长数据（模拟）
        {
          date: '2025-05-01',
          followers: 1258963,
          newFollowers: 5689,
          unFollowers: 892,
          netGrowth: 4797,
          growthRate: 15.7
        },
        {
          date: '2025-05-02',
          followers: 1263760,
          newFollowers: 6235,
          unFollowers: 986,
          netGrowth: 5249,
          growthRate: 16.2
        },
        {
          date: '2025-05-03',
          followers: 1268999,
          newFollowers: 5896,
          unFollowers: 763,
          netGrowth: 5133,
          growthRate: 15.9
        }
      ],
      // 图表实例存储
      viewsInteractionsChart: null,
      contentTypeChart: null,
      followersGrowthChart: null,
      interactionTypeChart: null
    };
  },
  created() {
    this.loadOverviewData(); // 初始化加载数据
  },
  methods: {
    // 加载数据（模拟API请求）
    async loadOverviewData() {
      try {
        // 实际应替换为真实API请求（示例使用模拟数据）
        const mockData = {
          overview: this.overviewData,
          hotContent: this.hotContentData,
          fansGrowth: this.fansGrowthData,
          viewsInteractionsTrend: [ // 曝光量与互动量趋势数据
            {x: '2025-05-01', views: 856932, interactions: 56932},
            {x: '2025-05-02', views: 923564, interactions: 62356},
            {x: '2025-05-03', views: 896542, interactions: 58963},
            {x: '2025-05-04', views: 956892, interactions: 65896},
            {x: '2025-05-05', views: 1023564, interactions: 72356}
          ],
          contentTypeDistribution: [ // 内容类型分布数据
            {label: '穿搭', value: 35},
            {label: '美妆', value: 28},
            {label: '美食', value: 18},
            {label: '旅行', value: 12},
            {label: '生活', value: 7}
          ],
          followersGrowthTrend: [ // 粉丝增长趋势数据
            {x: '2025-05-01', y: 1258963},
            {x: '2025-05-02', y: 1263760},
            {x: '2025-05-03', y: 1268999},
            {x: '2025-05-04', y: 1274235},
            {x: '2025-05-05', y: 1279568}
          ],
          interactionTypeDistribution: [ // 互动类型分布数据
            {label: '点赞', value: 55},
            {label: '评论', value: 25},
            {label: '收藏', value: 15},
            {label: '分享', value: 5}
          ]
        };

        // 初始化/更新图表
        this.initCharts(mockData);
      } catch (err) {
        this.$message.error('数据加载失败，请重试');
      }
    },

    // 初始化图表
    initCharts(data) {
      // 曝光量与互动量趋势（折线图）
      if (this.viewsInteractionsChart) this.viewsInteractionsChart.destroy();
      const viewsInteractionsCtx = document.getElementById('viewsInteractionsChart').getContext('2d');
      this.viewsInteractionsChart = new Chart(viewsInteractionsCtx, {
        type: 'line',
        data: {
          labels: data.viewsInteractionsTrend.map(item => item.x),
          datasets: [
            {
              label: '曝光量',
              data: data.viewsInteractionsTrend.map(item => item.views),
              borderColor: '#FE2C55',
              tension: 0.4
            },
            {
              label: '互动量',
              data: data.viewsInteractionsTrend.map(item => item.interactions),
              borderColor: '#36A2EB',
              tension: 0.4
            }
          ]
        },
        options: {responsive: true}
      });

      // 内容类型分布（饼图）
      if (this.contentTypeChart) this.contentTypeChart.destroy();
      const contentTypeCtx = document.getElementById('contentTypeChart').getContext('2d');
      this.contentTypeChart = new Chart(contentTypeCtx, {
        type: 'pie',
        data: {
          labels: data.contentTypeDistribution.map(item => item.label),
          datasets: [{
            data: data.contentTypeDistribution.map(item => item.value),
            backgroundColor: ['#FE2C55', '#36A2EB', '#4BC0C0', '#9966FF', '#FF9F40']
          }]
        },
        options: {responsive: true}
      });

      // 粉丝增长趋势（折线图）
      if (this.followersGrowthChart) this.followersGrowthChart.destroy();
      const followersGrowthCtx = document.getElementById('followersGrowthChart').getContext('2d');
      this.followersGrowthChart = new Chart(followersGrowthCtx, {
        type: 'line',
        data: {
          labels: data.followersGrowthTrend.map(item => item.x),
          datasets: [{
            data: data.followersGrowthTrend.map(item => item.y),
            borderColor: '#4BC0C0',
            tension: 0.4
          }]
        },
        options: {responsive: true}
      });

      // 互动类型分布（环形图）
      if (this.interactionTypeChart) this.interactionTypeChart.destroy();
      const interactionTypeCtx = document.getElementById('interactionTypeChart').getContext('2d');
      this.interactionTypeChart = new Chart(interactionTypeCtx, {
        type: 'doughnut',
        data: {
          labels: data.interactionTypeDistribution.map(item => item.label),
          datasets: [{
            data: data.interactionTypeDistribution.map(item => item.value),
            backgroundColor: ['#FE2C55', '#FFCE56', '#4BC0C0', '#9966FF']
          }]
        },
        options: {responsive: true}
      });
    },

    // 数字格式化（千位分隔符）
    formatNumber(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },

    // 百分比格式化
    formatPercentage(value) {
      const numValue = parseFloat(value);
      if (!isNaN(numValue)) {
        return numValue.toFixed(1) + '%';
      } else {
        // 如果不是有效的数字，返回默认值
        return '0.0%';
      }
    },

    // 获取进度条颜色
    getProgressColor(percentage) {
      if (percentage > 15) return '#4CD964'; // 绿色
      if (percentage > 10) return '#FF9500'; // 橙色
      return '#FE2C55'; // 红色
    }
  },
  mounted() {
    // 组件挂载后执行的逻辑
  }
};
</script>

<style lang="scss" scoped>

/* 数据概览相关样式 */
.data-overview {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.overview-title {
  font-size: 18px;
  font-weight: 500;
}

.overview-filters {
  display: flex;
  align-items: center;
  gap: 20px;
}

.time-filter,
.content-type-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 数据卡片 */
.data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.data-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.card-title {
  font-size: 14px;
  color: var(--gray-color);
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-change {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.card-change.positive {
  color: var(--success-color);
}

.card-change.negative {
  color: var(--primary-color);
}

/* 图表区域 */
.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.chart-content {
  height: 300px;
}

/* 热门内容表格 */
.hot-content {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.hot-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* 粉丝增长趋势 */
.fans-growth {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.growth-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.list-search-three {
  ::v-deep .el-input__prefix {
    left: 11px;
  }

  ::v-deep .el-input--prefix .el-input__inner {
    padding-left: 97px;
    border-radius: 10px;
  }

  ::v-deep .el-select > .el-input {
    display: block;
    width: 320px;

  }
}
::v-deep.el-form-item {
    margin-bottom: 0;
}
</style>
